<template>
  <view>
    <view class="gap-30 pay-card-box">

      <!-- preview-->
      <view v-if="isFile" class="padding-40 center">
        <view class="bg-white radio-40 center padding-20 common-title preview" hover-class="hover"
              @click="$emit('onPreview')">
          {{ otherLang.preview }}
        </view>
      </view>

      <!-- payment... -->
      <view class="safe-area-padding flex-center zh-CN ltr bg-white padding-40">
        <!-- Total Price -->
        <view :class="['flex-center gap-20', locale]">
          <view class="flex-center gap-20 price-label">
            <view>{{ otherLang.total_price }}</view>
            <view>:</view>
          </view>
          <view class="price-value">
            <view class="flex-center gap-10">
              <image class="icon-90" src="/static/globalIcon/rmb.svg"/>
              <view style="font-size: 80rpx;font-weight: bold;color: #07c160">{{ getPrice(payPrice) }}</view>
            </view>
          </view>
        </view>

        <!-- payment-->
        <view class="flex-1">
          <view class="flex-end gap-30">
            <view class="pay-button" hover-class="hover" @click="$emit('onPay')">
              {{ otherLang.buy_payment }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getPrice} from "@/utils/utils";

export default {
  name: 'PayCard',
  methods: {getPrice},
  emits: ['onPay', 'onPreview'],
  props: {
    payPrice: {
      type: Number,
      default: 0
    },
    isFile: {
      type: Boolean,
      default: false
    },
  }
}
</script>

<style lang="scss" scoped>
.pay-card-box {
  background-color: $u-main-bg-color;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.preview {
  width: 40%;
  color: #728c7e;
  border: solid 2rpx #07c160;
}


.price-label {
  font-size: 32rpx;
  color: #000000;
  font-weight: 400;
}

.price-value {
  padding: 6rpx 0 0 0;
}

.pay-button {
  border-radius: 22rpx;
  font-size: 32rpx;
  background: #07c160;
  color: #fff;
  text-align: center;
  padding: 24rpx 40rpx;
  line-height: 44rpx;
}
</style>
